<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">jqxToolBar automatically separates buttons in groups, which
        are specified by inserting separators ("|") in the tools definition.</title>
    <meta name="description" content="jqxToolBar automatically separates buttons in groups, which are specified by inserting separators ('|') in the tools definition." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .buttonIcon
        {
            margin: -5px 0 0 -2px;
            width: 18px;
            height: 17px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxToolBar").jqxToolBar({ width: 400, height: 35, tools: 'button button button | button button button | button button | button',
                initTools: function (type, index, tool, menuToolIninitialization) {
                    var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>");

                    switch (index) {
                        case 0:
                            icon.addClass("jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme);
                            icon.attr("title", "Bold");
                            tool.append(icon);
                            break;
                        case 1:
                            icon.addClass("jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme);
                            icon.attr("title", "Italic");
                            tool.append(icon);
                            break;
                        case 2:
                            icon.addClass("jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme);
                            icon.attr("title", "Underline");
                            tool.append(icon);
                            break;
                        case 3:
                            icon.addClass("jqx-editor-toolbar-icon-justifyleft jqx-editor-toolbar-icon-justifyleft-" + theme);
                            icon.attr("title", "Align Text Left");
                            tool.append(icon);
                            break;
                        case 4:
                            icon.addClass("jqx-editor-toolbar-icon-justifycenter jqx-editor-toolbar-icon-justifycenter-" + theme);
                            icon.attr("title", "Center");
                            tool.append(icon);
                            break;
                        case 5:
                            icon.addClass("jqx-editor-toolbar-icon-justifyright jqx-editor-toolbar-icon-justifyright-" + theme);
                            icon.attr("title", "Align Text Right");
                            tool.append(icon);
                            break;
                        case 6:
                            icon.addClass("jqx-editor-toolbar-icon-outdent jqx-editor-toolbar-icon-outdent-" + theme);
                            icon.attr("title", "Decrease Indent");
                            tool.append(icon);
                            break;
                        case 7:
                            icon.addClass("jqx-editor-toolbar-icon-indent jqx-editor-toolbar-icon-indent-" + theme);
                            icon.attr("title", "Increase Indent");
                            tool.append(icon);
                            break;
                        case 8:
                            icon.addClass("jqx-editor-toolbar-icon-insertimage jqx-editor-toolbar-icon-insertimage-" + theme);
                            icon.attr("title", "Insert Image");
                            tool.append(icon);
                            break;
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxToolBar">
    </div>
</body>
</html>